<script setup lang="ts">
import { defineProps, onBeforeUnmount, ref, watch } from 'vue'
const props = defineProps({
  videoUrl: {
    type: String,
    default: '',
  },
});
const loading = ref(false);
let ws: any = null;
const imgData = ref<any>(null);
const fullVisible = ref(false);
watch(() => props.videoUrl, (newVal) => {
  console.log(newVal);
  initVideo(newVal)
}, {
  deep: true,
});
// 数据流转base64图片
const arrayBufferToBase64 = (buffer: any) => {
  debugger
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  // 对二进制数据进行Base64编码
  return window.btoa(binary);
};
const initVideo = (url: string) => {
  if (!url) return;
  if (ws) {
    ws.close();
  }
  // 创建ws获取视频流
  ws = new WebSocket(url);
  ws.onopen = function () {
    console.log('ws open');
  };
  ws.onmessage = function (evt: any) {
    imgData.value = window.URL.createObjectURL(evt.data);
  };
  ws.onclose = function () {
    console.log('ws close');
  };
};
// 组件销毁时关闭ws
onBeforeUnmount(() => {
  if (ws) {
    ws.close();
  }
});
const showFull = () => {
  fullVisible.value = true;
}
</script>

<template>
  <div class="video" v-if="imgData">
    <img v-if="!fullVisible" alt="" :src="imgData || ''"/>
    <div class="tools">
      <img @click="showFull()" class="btn" src="../../../assets/images/icon-full.png" alt=""/>
    </div>
  </div>
  <div v-else class="loading">视频加载中...</div>
  <div class="full" v-if="fullVisible">
    <div class="cell">
      <div class="cell-bd">
        <img :src="imgData || ''"/>
      </div>
      <div class="cell-ft">
        <div class="btns">
          <div class="btn blue" @click="fullVisible = false">返回</div>
          <slot name="btns"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
img{
  width: 100%;
  height: 100%;
  display: block;
}


.video {
  width: 100%;
  min-height: 188px;
  font-size: 0;
  font-size: 0;
  .tools {
    padding: 15px;
    font-size: 0px;
    color: #fff;
    //line-height: 55px;
    text-align: right;

    .btn {
      width: 54px;
      display: inline-block;
    }
  }
}

.full{
  width: 100vh;
  height: 100vw;
  display: block;
  //background: #000;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 99;
  transform: rotate(90deg);
  transform-origin: 0 0;
  .cell{
    display: flex;
    .cell-bd{
      //background: #000;
      flex-grow: 1;
      height: 100vw;
    }
    .cell-ft{
      flex-grow: 0;
      background: #eee;
      width: 250px;
      position: relative;
    }
  }
  .btns{
    position: relative;
    padding: 0 15px;
    top: 50%;
    transform: translateY(-50%);
    .btn{
      width: 100%;
      height: 76px;
      background: #C4C6C9;
      border-radius: 6px;
      text-align: center;
      margin-bottom: 33px;
      color: #fff;
      line-height: 76px;
      font-size: 28px;
      &.blue {
        background: #3C9CFF;
      }
    }
  }
}
.loading{
  text-align: center;
  line-height: 188px;
  color: #999;
  font-size: 24px;
}
</style>
